<template>
  <div class="register-container">
    <div class="register-box">
      <!-- 表单区域 -->
      <van-form @submit="onSubmit" class="register-form">
        <h2 class="form-title">注册账号</h2>

        <van-cell-group inset>
          <!-- 手机号输入框 -->
          <van-field
            v-model="formData.mobile"
            name="mobile"
            placeholder="请输入手机号"
            :rules="phoneRules"
            maxlength="11"
            :formatter="value => value.replace(/[^\d]/g, '')"
          >
            <template #left-icon>
              <van-icon name="phone-o" class="field-icon" />
            </template>
            <template #input>
              <div class="custom-input">
                <input
                  v-model="formData.mobile"
                  type="tel"
                  maxlength="11"
                  placeholder="请输入手机号"
                />
              </div>
            </template>
          </van-field>

          <!-- 验证码输入框 -->
          <van-field
            v-model="formData.mobileCode"
            name="mobileCode"
            placeholder="请输入验证码"
            :rules="codeRules"
            maxlength="4"
          >
            <template #left-icon>
              <van-icon name="shield-o" class="field-icon" />
            </template>
            <template #input>
              <div class="custom-input">
                <input
                  v-model="formData.mobileCode"
                  type="tel"
                  maxlength="4"
                  placeholder="请输入验证码"
                />
              </div>
            </template>
            <template #button>
              <van-button
                size="small"
                type="primary"
                class="code-btn"
                :disabled="isCountingDown"
                @click="sendCode"
              >
                {{ countDownText }}
              </van-button>
            </template>
          </van-field>

          <!-- 密码输入框 -->
          <van-field
            v-model="formData.password"
            type="password"
            name="password"
            placeholder="请设置密码"
            :rules="passwordRules"
            maxlength="20"
          >
            <template #left-icon>
              <van-icon name="lock" class="field-icon" />
            </template>
            <template #input>
              <div class="custom-input">
                <input
                  v-model="formData.password"
                  type="password"
                  maxlength="20"
                  placeholder="请设置密码"
                />
              </div>
            </template>
          </van-field>

          <!-- 确认密码输入框 -->
          <van-field
            v-model="formData.confirmPassword"
            type="password"
            name="confirmPassword"
            placeholder="请确认密码"
            :rules="confirmPasswordRules"
            maxlength="20"
          >
            <template #left-icon>
              <van-icon name="lock" class="field-icon" />
            </template>
            <template #input>
              <div class="custom-input">
                <input
                  v-model="formData.confirmPassword"
                  type="password"
                  maxlength="20"
                  placeholder="请确认密码"
                />
              </div>
            </template>
          </van-field>
        </van-cell-group>

        <!-- 注册按钮 -->
        <div class="submit-btn">
          <van-button round block type="primary" native-type="submit">
            注册
          </van-button>
        </div>

        <!-- 其他操作区域 -->
        <div class="action-links">
          <span @click="toLogin">已有账号，去登录</span>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { register, getMoblieMsg } from '@/api/user/user'
const router = useRouter()

// 表单数据
const formData = ref({
  "id": 0,
  "mobile": "",
  "mobileCode": "",
  "name": "",
  "password": "",
  "pic": "",
  "role_id": 0,
  "status": 0
})

// 验证规则
const phoneRules = [
  { required: true, message: '请填写手机号' },
  { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
]

const codeRules = [
  { required: true, message: '请填写验证码' },
  { pattern: /^\d{4}$/, message: '验证码为4位数字' }
]

const passwordRules = [
  { required: true, message: '请设置密码' },
  { min: 6, max: 20, message: '密码长度需在6-20位之间' }
]

const confirmPasswordRules = [
  { required: true, message: '请确认密码' },
  {
    validator: (val) => val === formData.value.password,
    message: '两次输入的密码不一致'
  }
]

// 验证码倒计时
const countdown = ref(0)
const isCountingDown = computed(() => countdown.value > 0)
const countDownText = computed(() => {
  return isCountingDown.value ? `${countdown.value}秒后重试` : '获取验证码'
})

// 发送验证码
const sendCode = async () => {
  if (!formData.value.mobile) {
    showToast('请先输入手机号')
    return
  }
  if (!/^1[3-9]\d{9}$/.test(formData.value.mobile)) {
    showToast('请输入正确的手机号')
    return
  }

  try {
    // TODO: 调用发送验证码接口
    let res = await getMoblieMsg(formData.value.mobile)
    if (res.code === 200) {
    showToast('验证码已发送')
    countdown.value = 60
    const timer = setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) {
        clearInterval(timer)
      }
    }, 1000)
  }
  } catch (error) {
    showToast('发送失败，请重试')
  }
}

// 提交表单
const onSubmit = async () => {
  try {
    // TODO: 调用注册接口
    console.log(formData.value)
    let res = await register(formData.value)
    if (res.code === 200) {
    showToast('注册成功')
    router.push('/')
    }
  } catch (error) {
    showToast('注册失败')
  }
}

// 跳转登录页面
const toLogin = () => {
  router.push('/')
}
</script>

<style scoped>
.register-container {
  min-height: 100vh;
  background-color: #f7f8fa;
  display: flex;
  align-items: center;
  padding: 20px;
}

.register-box {
  width: 100%;
  background: #fff;
  border-radius: 8px;
  padding: 30px 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.form-title {
  text-align: center;
  font-size: 24px;
  color: #323233;
  margin: 0 0 30px;
  font-weight: 500;
}

:deep(.van-cell-group) {
  background-color: #f5f6f7;
  border-radius: 8px;
  margin-bottom: 24px;
}

:deep(.van-field) {
  background-color: transparent;
  padding: 10px 16px;
}

.field-icon {
  font-size: 16px;
  color: #969799;
}

.submit-btn {
  margin: 24px 0;
}

:deep(.van-button--primary) {
  background: #1989fa;
  height: 44px;
  font-size: 16px;
}

.code-btn {
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
}

.action-links {
  text-align: center;
  font-size: 14px;
  color: #969799;
}

.action-links span {
  display: inline-block;
  padding: 0 12px;
  color: #576b95;
  cursor: pointer;
}

.action-links span:active {
  opacity: 0.7;
}

.custom-input {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.custom-input input {
  width: 100%;
  height: 24px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: #323233;
  padding: 0;
}

.custom-input input::placeholder {
  color: #969799;
}

:deep(.van-field__left-icon) {
  margin-right: 8px;
}
</style>
